/**
 * Tab标签卡范例
 * 
 * @author XiongChun
 * @since 2010-10-27
 */
Ext.onReady(function() {
            var tabs = new Ext.TabPanel({
                        region:'center',
                        enableTabScroll : true,
                        //autoWidth : true,
                        height : 200,
                        buttonAlign : 'center',
                        buttons : [{
                                    text : '切换1',
                                    iconCls : 'acceptIcon',
                                    handler : function() {
                                        tabs.activate(1);
                                    }
                                }, {
                                    text : '禁用',
                                    iconCls : 'deleteIcon',
                                    handler : function() {
                                        Ext.getCmp('tab2').disable();
                                    }
                                }, {
                                    text : '激活',
                                    iconCls : 'acceptIcon',
                                    handler : function() {
                                        Ext.getCmp('tab2').enable();
                                    }
                                }]
                    });
            // 每一个Tab都可以看作为一个Panel
            tabs.add({
                        title : '<span class="commoncss">汇总信息</span>',
                        html : '汇总信息',
                        
                        tbar:tb, //工具栏
                         items:[grid],
                        iconCls : 'book_previousIcon', // 图标
                        closable : true
                    });
            tabs.add({
                        id : 'tab2',
                        title : '<span class="commoncss">明细信息</span>',
                        html : '明细信息'
                    });
            tabs.activate(0);//显示table 0
            
            // 布局模型
            var viewport = new Ext.Viewport({
                        layout : 'border',
                        items : [tabs]
                    });
                    
            
            
                // 布局模型
           // var viewport = new Ext.Viewport({
            //            layout : 'border',
            //            items : [grid]
            //        });
            // 复选框
            var sm = new Ext.grid.CheckboxSelectionModel();

            // 定义自动当前页行号
            var rownum = new Ext.grid.RowNumberer({
                        header : 'NO',
                        width : 28
                    });

            // 定义列模型
            var cm = new Ext.grid.ColumnModel([rownum, sm, {
                        header : '操作', // 列标题
                        dataIndex : 'edit',
                        width : 35,
                        renderer : iconColumnRender
                    }, {
                        header : '订单编号', // 列标题
                        dataIndex : 'orderno', // 数据索引:和Store模型对应
                        sortable : true
                        // 是否可排序
                }   , {
                        header : '订单学校',
                        dataIndex : 'orders',
                        sortable : true,
                        width : 50
                        // 列宽
                }   , {
                        header : '总金额',
                        dataIndex : 'totals',
                        sortable : true,
                    }, {
                        header : '实际金额',
                        dataIndex : 'actuals'
                    }, {
                        header : '操作状态',
                        dataIndex : 'operstatus'
                    }, {
                        header : '操作人员',
                        dataIndex : 'opername',
                        width : 60
                    }, {
                        header : '建立时间',
                        dataIndex : 'createTime',
                        width : 60
                    }, {
                        header : '更改时间',
                        dataIndex : 'updateTime'
                    }]);

            /**
             * 数据存储
             */
            var store = new Ext.data.Store({
                        // 获取数据的方式
                        proxy : new Ext.data.HttpProxy({
                                    url :'gridDemo.ered?reqCode=querySfxmDatas'
                                }),
                        // 数据读取器
                        reader : new Ext.data.JsonReader({
                                    totalProperty : 'TOTALCOUNT', // 记录总数
                                    root : 'ROOT' // Json中的列表数据根节点
                                }, [{
                                            name : 'orderno' // Json中的属性Key值
                                        }, {
                                            name : 'orders'
                                        }, {
                                            name : 'totals'
                                        }, {
                                            name : 'actuals'
                                        }, {
                                            name : 'operstatus
                                        }, {
                                            name : 'opername'
                                        }, {
                                            name : 'createTime'
                                        }, {
                                            name : 'updateTime'
                                        }])
                    });

            // 翻页排序时带上查询条件
            store.on('beforeload', function() {
                        this.baseParams = {
                            xmmc : Ext.getCmp('xmmc').getValue()
                        };
                    });
            // 每页显示条数下拉选择框
            var pagesize_combo = new Ext.form.ComboBox({
                        name : 'pagesize',
                        triggerAction : 'all',
                        mode : 'local',
                        store : new Ext.data.ArrayStore({
                                    fields : ['value', 'text'],
                                    data : [[10, '10条/页'], [20, '20条/页'],
                                            [50, '50条/页'], [100, '100条/页'],
                                            [250, '250条/页'], [500, '500条/页']]
                                }),
                        valueField : 'value',
                        displayField : 'text',
                        value : '20',
                        editable : false,
                        width : 85
                    });
            var number = parseInt(pagesize_combo.getValue());
            // 改变每页显示条数reload数据
            pagesize_combo.on("select", function(comboBox) {
                        bbar.pageSize = parseInt(comboBox.getValue());
                        number = parseInt(comboBox.getValue());
                        store.reload({
                                    params : {
                                        start : 0,
                                        limit : bbar.pageSize
                                    }
                                });
                    });

            // 分页工具栏
            var bbar = new Ext.PagingToolbar({
                        pageSize : number,
                        store : store,
                        displayInfo : true,
                        displayMsg : '显示{0}条到{1}条,共{2}条',
                        plugins : new Ext.ux.ProgressBarPager(), // 分页进度条
                        emptyMsg : "没有符合条件的记录",
                        items : ['-', '&nbsp;&nbsp;', pagesize_combo]
                    });

            // 表格工具栏
            var tbar = new Ext.Toolbar({
                        items : [{
                                    xtype : 'textfield',
                                    id : 'xmmc',
                                    name : 'xmmc',
                                    emptyText : '请输入项目名称',
                                    width : 150,
                                    enableKeyEvents : true,
                                    // 响应回车键
                                    listeners : {
                                        specialkey : function(field, e) {
                                            if (e.getKey() == Ext.EventObject.ENTER) {
                                                queryCatalogItem();
                                            }
                                        }
                                    }
                                },{
                                    xtype : 'textfield',
                                    id : 'xmmc',
                                    name : 'xmmc',
                                    emptyText : '请输入项目名称',
                                    width : 150,
                                    enableKeyEvents : true,
                                    // 响应回车键
                                    listeners : {
                                        specialkey : function(field, e) {
                                            if (e.getKey() == Ext.EventObject.ENTER) {
                                                queryCatalogItem();
                                            }
                                        }
                                    }
                                }, {
                                    text : '查询',
                                    iconCls : 'page_findIcon',
                                    handler : function() {
                                        queryCatalogItem();
                                    }
                                }, {
                                    text : '刷新',
                                    iconCls : 'page_refreshIcon',
                                    handler : function() {
                                        store.reload();
                                    }
                                }, {
                                    text : '新增',
                                    iconCls : 'page_refreshIcon',
                                    handler : function() {
                                        store.reload();
                                    }
                                }, '-', {
                                    text : '获取选择行',
                                    handler : function() {
                                        getCheckboxValues();
                                    }
                                }]
                    });

            // 表格右键菜单
            var contextmenu = new Ext.menu.Menu({
                        id : 'theContextMenu',
                        items : [{
                            text : '查看详情',
                            iconCls : 'previewIcon',
                            handler : function() {
                                // 获取当前选择行对象
                                var record = grid.getSelectionModel()
                                        .getSelected();
                                var xmmc = record.get('xmmc');
                                Ext.MessageBox.alert('提示', xmmc);
                            }
                        }, {
                            text : '导出列表',
                            iconCls : 'page_excelIcon',
                            handler : function() {
                                // 获取当前选择行对象
                                var record = grid.getSelectionModel()
                                        .getSelected();
                                var xmmc = record.get('xmmc');
                                Ext.MessageBox.alert('提示', xmmc);
                            }
                        }]
                    });

            // 表格实例
            var grid = new Ext.grid.GridPanel({
                        // 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
                        title : '<span class="commoncss">订单综合查询</span>',
                        height : 500,
                        frame : true,
                        autoScroll : true,
                        region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
                        store : store, // 数据存储
                        stripeRows : true, // 斑马线
                        cm : cm, // 列模型
                        sm : sm, // 复选框
                        tbar : tbar, // 表格工具栏
                        bbar : bbar,// 分页工具栏
                        viewConfig : {
            // 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
                        // forceFit : true
                        },
                        loadMask : {
                            msg : '正在加载表格数据,请稍等...'
                        }
                    });

            // 是否默认选中第一行数据
            bbar.on("change", function() {
                        // grid.getSelectionModel().selectFirstRow();

                    });

            // 页面初始自动查询数据
            // store.load({params : {start : 0,limit : bbar.pageSize}});

            // 小画笔点击事件
            grid.on("cellclick", function(pGrid, rowIndex, columnIndex, e) {
                        var store = pGrid.getStore();
                        var record = store.getAt(rowIndex);
                        var fieldName = pGrid.getColumnModel()
                                .getDataIndex(columnIndex);
                        // columnIndex为小画笔所在列的索引,缩阴从0开始
                        // 这里要非常注意!!!!!
                        if (fieldName == 'edit' && columnIndex == 2) {
                            var xmmc = record.get("xmmc");
                            // 到此你就可以继续做其他任何事情了
                            Ext.MessageBox.alert('提示', xmmc);
                        }
                    });

            // 监听单元格双击事件
            grid.on("celldblclick", function(pGrid, rowIndex, columnIndex, e) {
                var record = pGrid.getStore().getAt(rowIndex);
                var fieldName = pGrid.getColumnModel()
                        .getDataIndex(columnIndex);
                var cellData = record.get(fieldName);
                    // Ext.MessageBox.alert('提示', cellData);
                });

            // 监听行双击事件
            grid.on('rowdblclick', function(pGrid, rowIndex, event) {
                        // 获取行数据集
                        var record = pGrid.getStore().getAt(rowIndex);
                        // 获取单元格数据集
                        var data = record.get("xmmc");
                        Ext.MessageBox.alert('提示', "双击行的索引为:" + rowIndex);
                    });

            // 给表格绑定右键菜单
            grid.on("rowcontextmenu", function(grid, rowIndex, e) {
                        e.preventDefault(); // 拦截默认右键事件
                        grid.getSelectionModel().selectRow(rowIndex); // 选中当前行
                        contextmenu.showAt(e.getXY());
                    });

        

            // 查询表格数据
            function queryCatalogItem() {
                store.load({
                            params : {
                                start : 0,
                                limit : bbar.pageSize,
                                xmmc : Ext.getCmp('xmmc').getValue()
                            }
                        });
            }

            // 获取选择行
            function getCheckboxValues() {
                // 返回一个行集合JS数组
                var rows = grid.getSelectionModel().getSelections();
                if (Ext.isEmpty(rows)) {
                    Ext.MessageBox.alert('提示', '您没有选中任何数据!');
                    return;
                }
                // 将JS数组中的行级主键，生成以,分隔的字符串
                var strChecked = jsArray2JsString(rows, 'xmid');
                Ext.MessageBox.alert('提示', strChecked);
                // 获得选中数据后则可以传入后台继续处理
            }


            // 生成一个图标列
            function iconColumnRender(value) {
                return "<a href='javascript:void(0);'><img src='" + webContext
                        + "/resource/image/ext/edit1.png'/></a>";;
            }

        });